<template>
	<view class="wrap">
		<div class="cell" v-for="item in logList">
			<div class="title">
				<div class="date">2023.01.05</div>
				<div class="status">阶段一</div>
			</div>
			<div class="content">
				<div class="text">
					这篇实际在去年就写完了，以前买的房子有一些装修（开发商基本装修完毕，除了灶台），但是这套毛坯从头到位的装修流程跑完很费劲，而且装修中间踩过了一些坑，对于即将装修，或者未来即将装修的小伙伴或许有一些参考意义，因为很多人即便不买房，几年后也会重新装修，本文算是基础核心的装修整理，大部分装修八九不离十。
				</div>
				<div class="imglist">
					<u-album :urls="urls2" rowCount="3"></u-album>
					<!-- <image mode="widthFix" src="https://cdn.uviewui.com/uview/album/7.jpg"></image>
					<image mode="widthFix" src="https://cdn.uviewui.com/uview/album/3.jpg"></image>
					<image mode="widthFix" src="https://cdn.uviewui.com/uview/album/10.jpg"></image> -->
				</div>
			</div>
			{{ obj.v_state }}
			<div class="bottom">
				<div class="btn btn1" v-if="obj.v_state == 3" @click="submitRework('2','item.logId')">不满意返工</div>
				<div class="btn btn2" v-if="obj.v_state == 1" @click="submitRework('1','item.logId')">阶段完成确认</div>
				<div class="btn btn3" v-if="obj.v_state == 2">已完成</div>
			</div>
		</div>
		<u-modal :show="confirmShow" :title="title" @confirm="confirmRework" @cancel="confirmShow = false" showCancelButton>
			<view class="slot-content">
				<view>当前阶段施工完成了吗？</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
export default {
	data() {
		return {
			confirmShow: false,
			title: '阶段完成确认',
			content: '当前阶段施工完成了吗？',
			userInfo: {},
			affirmType:'',
			logId:'',
			obj: {},
			logList: [1,2],
			urls2: [
				'https://cdn.uviewui.com/uview/album/1.jpg',
				'https://cdn.uviewui.com/uview/album/2.jpg',
				'https://cdn.uviewui.com/uview/album/3.jpg'
				// 'https://cdn.uviewui.com/uview/album/4.jpg',
				// 'https://cdn.uviewui.com/uview/album/5.jpg',
				// 'https://cdn.uviewui.com/uview/album/6.jpg',
				// 'https://cdn.uviewui.com/uview/album/7.jpg',
				// 'https://cdn.uviewui.com/uview/album/8.jpg',
				// 'https://cdn.uviewui.com/uview/album/9.jpg',
				// 'https://cdn.uviewui.com/uview/album/10.jpg'
			]
		};
	},
	onLoad(options) {
		this.getUserInfo();
		if (options.id) {
			this.$nextTick(() => {
				this.getOrderDetais(options.id);
				this.getBuildLogs(options.id);
			});
		} else {
			this.$nextTick(() => {
				this.getOrderDetais('20240104095839414969');
			});
		}
	},
	methods: {
		submitRework(type,id) {
			this.affirmType = type
			this.logId = id
			if (type === 2) {
				
				this.title = '不满意返工';
				this.content = '确认不满意返工吗？';

			} else {
				this.title = '阶段完成确认';
				this.content = '当前阶段施工完成了吗？';
				
			}
			this.confirmShow = true;
		},
		confirmRework() {
			console.log(this.affirmType)
			this.confirmShow = false;
		},
		// 获取订单详情
		getOrderDetais(id) {
			this.$api.post('/fit/getOrderDetail', { userId: this.userInfo.id, outTradeNo: id }).then((res) => {
				console.log(res);
				this.obj = res.data;
			});
		},
		// 装修日记列表(新)
		getBuildLogs(id) {
			this.$api.post('/fit/getUserBuildLogs', { userId: this.userInfo.id, outTradeNo: id }).then((res) => {
				console.log(res);
				this.logList = res.data;
			});
		},
		// 阶段确认完成/不满意
		affirmBuildLog(type,logId) {
			const params = {
				outTradeNo: type,
				userId: this.userInfo.id,
				outTradeNo: this.obj.order_no,
				logId: this.logId
			};
			this.$api.post('/fit/affirmBuildLog', params).then((res) => {
				console.log(res);
				this.logList = res.data;
			});
		},
		// 获取用户信息数据
		getUserInfo() {
			let that = this;
			uni.getStorage({
				key: 'userInfo',
				success(res) {
					that.userInfo = res.data;
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
.wrap {
	padding: 32rpx;
	.cell {
		padding: 32rpx;
		background-color: #fff;
		border-radius: 16rpx;
		margin-bottom: 30rpx;
		.title {
			color: #333;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.date {
				font-size: 32rpx;
			}
			.stuts {
				font-size: 28rpx;
			}
		}
		.content {
			margin-top: 32rpx;
			margin-bottom: 72rpx;
			color: #666;
			font-size: 28rpx;
			width: 100%;
			.imglist {
				margin-top: 32rpx;
				width: 100%;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-wrap: wrap;
				// gap:10rpx;
				/deep/ uni-image {
					border-radius: 16rpx;
					width: 30%;
					height: 186rpx;
					margin-right: 3%;
					object-fit: cover;
				}
				// .imgBox{

				// }
			}
		}
		.bottom {
			display: flex;
			justify-content: flex-end;
			align-content: center;
			.btn {
				// width: 204rpx;
				padding: 0rpx 32rpx;
				height: 56rpx;
				line-height: 56rpx;
				text-align: center;
				border-radius: 35rpx;
				font-size: 26rpx;
				// margin-left: 36rpx;
			}

			.btn1 {
				background: #f8f9fa;
				color: #333;
			}
			.btn2 {
				background: #f55726;
				color: #fff;
				margin-left: 32rpx;
			}
			.btn3 {
				background: #cccccc;
				color: #fff;
				margin-left: 32rpx;
			}
		}
	}
}
</style>
